import React, { useMemo } from 'react';

import { Button, Card, Form } from 'antd';
import { history } from 'umi'

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { useRequest } from '@/hooks';
import useDictionary from '@/hooks/useDictionary';
import { TemplateEditor } from '@/pages/TurnoverSetting/EntrySetting/components';
import { formatResultByFetchDetail } from '@/pages/TurnoverSetting/EntrySetting/util';

import { getGuideNoticeConfig } from '../services';
import styles from './index.less';

/**
 * 入职须知模板编辑页
 */
const EntryGuideNoticeSettingDetail = ({ location }) => {
    const { query } = location;
    const { id } = query;
    const [paramOfEntryNoteList] = useDictionary('paramOfEntryNote');
    const paramOfEntryNoteListTransformed = useMemo(() => {
        if (paramOfEntryNoteList) {
            return paramOfEntryNoteList.map(item => ({ field: item.value, value: item.text }));
        }
        return [];
    }, [paramOfEntryNoteList]);

    // 获取已存在的数据
    const { data, loading } = useRequest(() => getGuideNoticeConfig(id), {
        ready: id,
        formatResult: formatResultByFetchDetail
    });

    return (
        <PageHeaderWrapper>
            <Card
                title="入职须知模板详情"
                bordered={false}
                loading={loading}
                extra={
                    <Button
                        type="primary"
                        onClick={() => {
                            history.push({
                                pathname: '/office/personnelManagement/onboardAndLeave/setting/entryGuideNotice/edit',
                                query: { id: query?.id }
                            });
                        }}
                    >
                        编辑
                    </Button>
                }
            >
                <Form className={styles.formWrap}>
                    <Form.Item label="模板名称">{data?.settingName}</Form.Item>
                    <Form.Item label="适用行政机构">
                        {data?.isDefault === 1 ? '全集团' : data?.administrativeScopeNames?.join('、')}
                    </Form.Item>
                    <Form.Item label="模板内容">
                        <TemplateEditor
                            initialValue={data?.tplContent || ''}
                            contentStyle={{ height: 'auto', minHeight: 250 }}
                            insertParamList={paramOfEntryNoteListTransformed} // 要参数的参数由外部引入
                            readOnly
                        />
                    </Form.Item>
                </Form>
            </Card>
        </PageHeaderWrapper>
    );
};

EntryGuideNoticeSettingDetail.displayName = 'EntryGuideNoticeSettingDetail';

export default React.memo(EntryGuideNoticeSettingDetail);
